<template>
  <div class="container">
    <div class="right">
      <div class="top"></div>
      <div>
        <el-button-group style="">
          <el-button size="large" round>多站统计</el-button>
          <el-button size="large" round type="info">单站统计 </el-button>
        </el-button-group>
      </div>
      <div class="item">
        <span>站点名称：</span>
        <div>
          <el-input
            size="large"
            placeholder="请输入站点"
            style="padding-top: 10px"
          >
            <template #append>
              <el-icon color="#409EFC" class="no-inherit" :size="40">
                <CirclePlus />
              </el-icon>
            </template>
          </el-input>
        </div>
        <!-- //时间选择器 -->
        <div class="block">
          <span class="demonstration"></span>
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
            size="large"
            style="margin-top: 13px"
          />
          <el-button size="large" type="primary" style="margin-left: 40px"
            >搜索</el-button
          >
          <el-button size="large" type="primary" style="margin-right: 40px"
            >导出
          </el-button>
        </div>
      </div>
     
        <el-table
          :max-height="tableHeight"
          :row-class-name="tableRowClassName"
          :data="tableData1"
          :default-sort="{ prop: 'date', order: 'descending' }"
          :row-style="{ height: '70px' }"
          style="width: 100%"
          :header-cell-style="{
            borderTop: 'none',
            borderLeft: 'none',
            borderRight: 'none',
          }"
          :cell-style="{
            borderTop: ' 2px  dashed blue',
            borderBottom: ' 2px  dashed blue',
            borderRight: 'none',
          }"
        >
          <el-table-column prop="no" label="序号" width="100" />
          <el-table-column prop="name" label="站点名称" width="140" />
          <el-table-column prop="commstatus" label="通信状态" width="120" />
          <el-table-column
            prop="tricklecharge"
            label="系统充放状态"
            width="130"
          />
          <el-table-column prop="soc" label="SOC" sortable width="120" />
          <el-table-column
            prop="totalactivepower"
            label="总有功功率"
            sortable
            width="120"
          />
          <el-table-column
            prop="chargingcapacity"
            label="今日充电量"
            sortable
            width="120"
          />
          <el-table-column
            prop="dischargecapacity"
            label="今日放电量"
            sortable
            width="120"
          />
          <el-table-column
            prop="cooltemp"
            label="空调/液冷温度"
            sortable
            width="140"
          />
          <el-table-column
            prop="alarm"
            label="今日告警次数"
            sortable
            width="140"
          />
          <el-table-column prop="current" label="当前是否告警" width="140" />
          <el-table-column prop="listconfig" label="列表配置" width="90" />
        </el-table>
     
      <el-pagination
        small
        background
        layout="->,prev, pager, next"
        :total="50"
        class="mt-4"
      />
    </div>
  </div>
</template>

<script>
import { CirclePlus } from "@element-plus/icons-vue";

export default {
  name: "SecondPage",
  data() {
    return {
      tableData1: [
        {
          no: "1",
          name: "1",
          commstatus: "正常",
          tricklecharge: "充电",
          soc: "99%",
          totalactivepower: "100.00kW",
          chargingcapacity: "100.00KWh",
          dischargecapacity: "100.00KWh",
          cooltemp: "37.1℃",
          alarm: "2",
          current: "否",
          listconfig: "",
        },
        {
          no: "1",
          name: "1",
          commstatus: "正常",
          tricklecharge: "充电",
          soc: "99%",
          totalactivepower: "100.00kW",
          chargingcapacity: "100.00KWh",
          dischargecapacity: "100.00KWh",
          cooltemp: "37.1℃",
          alarm: "2",
          current: "否",
          listconfig: "",
        },
        {
          no: "1",
          name: "1",
          commstatus: "正常",
          tricklecharge: "充电",
          soc: "99%",
          totalactivepower: "100.00kW",
          chargingcapacity: "100.00KWh",
          dischargecapacity: "100.00KWh",
          cooltemp: "37.1℃",
          alarm: "2",
          current: "否",
          listconfig: "",
        },
        {
          no: "1",
          name: "1",
          commstatus: "正常",
          tricklecharge: "充电",
          soc: "99%",
          totalactivepower: "100.00kW",
          chargingcapacity: "100.00KWh",
          dischargecapacity: "100.00KWh",
          cooltemp: "37.1℃",
          alarm: "2",
          current: "否",
          listconfig: "",
        },
        {
          no: "1",
          name: "1",
          commstatus: "正常",
          tricklecharge: "充电",
          soc: "99%",
          totalactivepower: "100.00kW",
          chargingcapacity: "100.00KWh",
          dischargecapacity: "100.00KWh",
          cooltemp: "37.1℃",
          alarm: "2",
          current: "否",
          listconfig: "",
        },
        {
          no: "1",
          name: "1",
          commstatus: "正常",
          tricklecharge: "充电",
          soc: "99%",
          totalactivepower: "100.00kW",
          chargingcapacity: "100.00KWh",
          dischargecapacity: "100.00KWh",
          cooltemp: "37.1℃",
          alarm: "2",
          current: "否",
          listconfig: "",
        },
        {
          no: "1",
          name: "1",
          commstatus: "正常",
          tricklecharge: "充电",
          soc: "99%",
          totalactivepower: "100.00kW",
          chargingcapacity: "100.00KWh",
          dischargecapacity: "100.00KWh",
          cooltemp: "37.1℃",
          alarm: "2",
          current: "否",
          listconfig: "",
        },
      ],
      methods: {
        //用来修改单元格css
        tableRowClassName({ row, column, rowIndex, columnIndex }) {
          if (columnIndex == 0) {
            return "cell-start";
          } else if (columnIndex == 9) {
            return "cell-end";
          } else {
            return "cell-middle";
          }
        },
      },
    };
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: auto;
  // background-color: #243340;
  display: flex;
  // position: absolute;

  .right {
    flex: 1;
    // background-color: #243340;

    display: flex;
    flex-direction: column;
    .top {
      height: 1px;
      top: 40px;
      position: relative;
      // background-color: #243340;
    }
    .item {
      font-size: 18px;
      align-items: center;
      display: flex;
      margin: 10px 0;
      // width: 140px;
      // background-color: #243340;
    }
    .bottom {
      flex: 1;
      // background-color: #243340;
    }
  }
}


.DDD {
  margin-top: 5px;
}
.custom-table {
  width: 77%;
  border-top: 2px dashed rgb(17, 17, 134);
  margin-right: 10px;
  font-size: 14px;
}
//表头字体大小颜色设置
::v-deep .el-table th.is-leaf {
  font-size: 14px;
  font-weight: bolder;
  color: rgba(17, 196, 228, 0.8);
}
::v-deep .el-table__body {
  // -webkit-border-horizontal-spacing: 13px;  // 水平间距
  -webkit-border-vertical-spacing: 13px; // 垂直间距
  border: 2px dashed rgb(13, 13, 204);
  //border-spacing:0px 9px !important;
}


::v-deep .el-table .el-table__body tr {
  border-right: 2px dashed green !important;
}








</style>
